<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity"
      layout:decorator="admin/layout" ng-app="panda">
<body>

<div layout:fragment="content" class="ui page padded grid">

    <div class="sixteen wide column" ng-controller="NavCtrl">
        <div class="ui secondary pointing menu">
            <a class="item" ng-class="{active:is('index')}" href="#/">
                <i class="home icon"></i> <span th:text="#{index.menu.index}" th:remove="tag"/>
            </a>

            <div class="ui dropdown item" sec:authorize="hasRole('ROLE_CONTENT') || hasRole('ROLE_ADMIN')">
                <i class="database icon"></i>
                <span th:text="#{index.menu.content}" th:remove="tag"/>
                <i class="dropdown icon"></i>

                <div class="menu">
                    <a class="item" href="#/content/pages"><i class="file text outline icon"></i>
                        <span th:text="#{index.menu.pages}" th:remove="tag"/>
                    </a>
                    <a class="item" href="#/content/announcement"
                       sec:authorize="hasRole('ROLE_MANAGER') || hasRole('ROLE_ADMIN')">
                        <i class="announcement icon"></i> <span th:text="#{index.menu.announcement}" th:remove="tag"/>
                    </a>
                </div>
            </div>
            <div class="ui dropdown item" sec:authorize="hasRole('ROLE_ADMIN')">
                <i class="settings icon"></i>
                <span th:remove="tag" th:text="#{index.menu.administration}"/> <i class="icon dropdown"></i>

                <div class="menu">
                    <a class="item" href="#/admin/users"> <i class="user icon"></i>
                        <span th:text="#{index.menu.users}" th:remove="tag"/>
                    </a>
                    <a class="item" href="#/admin/groups"> <i class="users icon"></i>
                        <span th:text="#{index.menu.groups}" th:remove="tag"/>
                    </a>
                    <a class="item" href="#/admin/redirects"> <i class="share icon"></i>
                        <span th:text="#{index.menu.redirects}" th:remove="tag"/>
                    </a>
                </div>
            </div>
            <a class="item" ng-class="{active:is('analytics')}" href="#/analytics"
               sec:authorize="hasRole('ROLE_ANALYTICS') || hasRole('ROLE_ADMIN')">
                <i class="wifi icon"></i>
                <span th:text="#{index.menu.analytics}" th:remove="tag"/>
            </a>

            <div class="right menu">
                <div class="item">
                    <div class="ui icon input">
                        <input placeholder="Search..." type="text"/>
                        <i class="search link icon"></i>
                    </div>
                </div>
                <div class="ui dropdown item">
                    <i class="dropdown icon"></i>
                    <i class="user icon"></i>
                    <span sec:authentication="name">user</span>

                    <div class="menu">
                        <a class="item" href="#/profile"><i class="user icon"></i>
                            <span th:text="#{index.menu.profile}" th:remove="tag"/>
                        </a>

                        <div class="divider"></div>
                        <a class="item logout"><i class="power icon"></i>
                            <span th:text="#{index.menu.logout}" th:remove="tag"/>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="one column row" ng-controller="NavCtrl">
        <div class="column">
            <div class="ui breadcrumb ng-cloak">
                <a class="section" href="#/">Home</a>
                <i class="right chevron icon divider" ng-if="breadcrumb.length"></i>

                <div class="section" ng-class="{active:$last}" ng-repeat-start="item in breadcrumb">{{item}}</div>
                <i class="right chevron icon divider" ng-repeat-end="" ng-if="!$last"></i>
            </div>
        </div>
    </div>

    <div class="one column row">
        <div class="column" ng-view=""/>
    </div>

    <form id="logout" action="/admin/logout" method="post" class="ui icon input form">
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
    </form>

</div>

<th:block layout:fragment="body-bottom">
    <script type="text/javascript">
    $('.item.logout').on('click', function(){ $('#logout').submit(); });
    $('.dropdown').dropdown({ transition: 'slide down' });
    </script>
    <script th:src="@{/webjars/angularjs/1.3.13/angular.min.js}"/>
    <script th:src="@{/webjars/angularjs/1.3.13/angular-route.min.js}"/>
    <script th:src="@{/webjars/angularjs/1.3.13/angular-resource.min.js}"/>
    <script th:inline="javascript" type="text/javascript">
        angular.module('panda.config',[]).constant('Security',{token:[[${_csrf.token}]]});
    </script>
    <script th:src="@{/admin/js/application.js}"/>
    
</th:block>
</body>
</html>